<template>
	<view class="datapage">
		<view class="tabbox">
			<view class="itemtab" :class="tab==1?'act':''" @click="selecttab(1)">
				血压
			</view>
			<view class="itemtab" :class="tab==2?'act':''" @click="selecttab(2)">
				体重
			</view>
			<view class="itemtab" :class="tab==3?'act':''" @click="selecttab(3)">
			  血糖
			</view>
		</view>
		<XueYa v-if="tab==1"></XueYa>
		<TiZhong v-if="tab==2"></TiZhong>
		<XueTang v-if="tab==3"></XueTang>
	</view>
</template>

<script>
	import XueTang from '../xuetang/xuetang.vue'
	import TiZhong from '../tizhong.vue'
	import XueYa from '../xueya/xueya.vue'
	export default {
		data() {
			return {
				tab:3
			}
		},
		components:{
			XueYa,
			TiZhong,
			XueTang
		},
		onLoad(e) {
			console.log(e)
			if(e.tab){
				this.tab=e.tab
			}
		},
		methods: {
			selecttab(e){
				this.tab=e
			},
		}
	}
</script>

<style lang="less" scoped>
.datapage{
	width: 750rpx;
	box-sizing: border-box;
	padding: 20rpx;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	.tabbox{
		width: 100%;
		display: flex;
		align-items: center;
		.itemtab{
			width: 110rpx;
			font-weight: bold;
			color: #6E6E6E ;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			margin: 0 40rpx;
		}
		.act{
			color: white !important;
			background-color:#1A4F8A;
		}
	}
	
}
</style>
